<template>
    <div>
        <nav-com title="提现绑定" :showView='showView' @back="backHandler()"></nav-com>
        <van-tabs color="#FF6F4E" @click="childActive(active)" title-active-color="#FF6F4E" v-model="active">
            <van-tab title="银行卡方式">
        <div class="real_box">
            <div v-if="realNamefrom.memo" class="real_text_msg">
                {{realNamefrom.memo}}
            </div>
            <div class="real_text">
                为保证资金安全到帐，请用您本人身份信息进行认证校验
            </div>
            <div class="real_title title_height">
                本人正面照(要求清晰)
            </div>
            <div class="real_ps">
                <van-uploader style="width:89vw; height:40vw;" v-model="fileList" multiple :before-delete="beforeDel" :after-read='afterRead'>
                    <div :style="{'display':styledisplay}" class="real_photo_btn">
                        <img src="../../assets/p1.png" />
                        <p>上传本人正面</p>
                        <p>3M以内</p>
                    </div>
                </van-uploader>
            </div>
            <div class="real_title title_height margin_t">
                请选择银行
            </div>
            <div class="real_input">
                <div @click="showPipup = true"
                :style="{color:rankColor}"
                style=" padding-left:2.6vw; padding-top:2.6vw; font-size:5.3vw;"
                >{{realNamefrom.rankName}}</div>
                <!-- <input type="text"  placeholder="请选择银行"> -->
            </div>
            <div class="real_msg">{{validator.rankName}}</div>
            <div class="real_title title_height margin_t">
                银行卡号
            </div>
            <div class="real_input">
                <input type="text" v-model="realNamefrom.rankCard" @blur="rankCardValidator(realNamefrom.rankCard)" placeholder="请输入本人银行卡号">
            </div>
            <div class="real_msg">{{validator.rankCard}}</div>
            <div class="bottom_box">
                <div class="real_title title_height margin_t">
                    手机号
                </div>
                <div class="real_input">
                    <input type="text" v-model="realNamefrom.cardCellphone" @blur="cardCellphoneValidator(realNamefrom.cardCellphone)" placeholder="请输入银行卡绑定的手机号">
                </div>
                <div class="real_msg">{{validator.cardCellphone}}</div>
            </div>
            
        </div>
        <div class="real_bottom">
            <div style="padding: 4vw;">
                <van-button style="font-size:4.8vw; height:13.33vw;" color="#FF491F" type="info"  @click="bankHandler(realNamefrom)" round  block>提交</van-button>
            </div>
        </div>
        <van-popup v-model="showPipup" position="bottom">
            <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPipup = false"></van-picker>
        </van-popup>
        </van-tab>
            <van-tab title="支付宝方式">
                <div class="real_box">
                    <div style="text-align:center">即将上线</div>
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>
<script>
import navCom from '@/component/nav'
import {getMemberbankcards,postImages,postMemberbankcards,getMemberbankcardsId,putMemberbankcardsId,getMemberidcards}  from '@/api/api'
export default {
    name:'bndingBank',
    components:{
        navCom
    },
    data() {
        return{
            showView:true,
            uid: weixin.getUserId(),
            list:[],
            styledisplay:'block',
            styledisplay2:'block',
            fileList:[],
            fileList2:[],
            rankColor:'#757575',
            rankName:'请选择银行',
            showPipup:false,
            columns:['工商银行','中国银行','建设银行','交通银行','广发银行','中信银行','兴业银行','平安银行','浦发银行','邮储银行','光大银行',
            '农业银行','招商银行','民生银行','上海银行','北京银行','华夏银行'],
            realNamefrom:{
                picUrl:'',
                rankName:'请选择银行',
                rankCard:'',
                cardCellphone:'',
                memo:'',
            },
            validator:{
                rankName:'',
                rankCard:'',
                cardCellphone:''
            },
            postMemberbankcardsHandler:false,
            putMemberbankcardsHandler:false,
            putMemberbankId:'',
            active:0,


        }
    },
    mounted(){
        this.memberidCardsHandle()
    },
    methods:{
        //返回
        backHandler(){
            this.$router.push('/my')
        },
        //初始化
        init(){
            this.fileList = []
            getMemberbankcards({userId:this.uid}).then(res=>{
                if(res.data.code === 200){
                    if(res.data.data.rows.length == 0){
                        this.postMemberbankcardsHandler = true
                    }else{
                        this.putMemberbankcardsHandler = true
                        let data = res.data.data.rows[0]
                        this.putMemberbankId = data.id

                        getMemberbankcardsId({id:data.id}).then(res=>{
                            if(res.data.code == 200){
                                let cardData = res.data.data
                                this.fileList.push({url:cardData.picUrl})
                                this.realNamefrom.picUrl = cardData.picUrl
                                this.realNamefrom.rankName = cardData.bankName
                                this.realNamefrom.rankCard = cardData.cardNumber
                                this.realNamefrom.cardCellphone = cardData.cardCellphone
                                if(cardData.state == 'success'){
                                    this.realNamefrom.memo = '绑定成功'
                                }else{
                                    this.realNamefrom.memo = cardData.memo
                                }
                                
                                this.rankColor = '#333'
                                this.styledisplay = 'none'
                            }
                        })
                    }
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //实名认证验证
        memberidCardsHandle(){
            getMemberidcards({userId:this.uid}).then(res=>{
                if(res.data.code == 200){
                    let memberData = res.data.data
                    if(memberData.state == "pending"){
                        this.$dialog.alert({
                            message:'你还没有实名认证，现在去实名认证',
                            showCancelButton: true
                        }).then(()=>{
                            this.$router.push('/realName')
                        }).catch(()=>{
                            this.$router.go(-1)
                        })
                    }else if(memberData.state == "failure"){
                        this.$dialog.alert({
                            message:'你实名认证失败，重新去实名认证',
                            showCancelButton: true
                        }).then(()=>{
                            this.$router.push('/realName')
                        }).catch(()=>{
                            this.$router.go(-1)
                        })
                    }else if(memberData.state == "success"){
                        //获取银行卡信息
                        this.init()
                    }
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //切换
        childActive(val){
            
        },
        //银行卡号验证
        rankCardValidator(val){
            let reg = /^([\d]{14,30})$/
            if(val=='' || val.trim().length==0){
                this.validator.rankCard = '银行卡号不能为空'
                return false
            }else if(!reg.test(val.trim())){
                this.validator.rankCard = '银行卡号不正确'
                return false
            }else {
                this.validator.rankCard = ''
                return true
            }

        },
        //手机号验证
        cardCellphoneValidator(val){
            let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if(val=='' || val.trim().length==0 ){
                this.validator.cardCellphone = '手机号不能为空'
                return false
            }else if(!reg.test(val)){
                this.validator.cardCellphone = '手机号不正确'
                return false
            }else {
                this.validator.cardCellphone = ''
                return true
            }

        },
        //图片上传
        afterRead(file){
            if(this.fileList.length > 0){
                this.styledisplay = 'none'
            }
            if(this.fileList2.length > 0){
                this.styledisplay2 = 'none'
            }
            let that = this
            let funBack = function(file){
                var fd = new FormData()
                fd.append('file',file)
                fd.append('albumId','10001')
                postImages(fd).then(res=>{
                    that.realNamefrom.picUrl = res.data.data
                    that.$forceUpdate()
                })
            }
            weixin.uploadIF(file,funBack)
            return false
        },
        //图片删除
        beforeDel(file){
            if(this.fileList.length > 0){
                this.styledisplay = 'block'
            }
            if(this.fileList2.length > 0){
                this.styledisplay2 = 'block'
            }
            
            return true
        },
        //银行验证
        rankNameValidator(val){
            if(val=='请选择银行'){
                this.validator.rankName = '请选择银行卡'
                return false
            }else {
                this.validator.rankName = ''
                return true
            }
        },
        //银行选择
        onConfirm(value){
            this.realNamefrom.rankName = value
            this.validator.rankName = ''
            this.rankColor = '#333'
            this.showPipup = false
        },
        //提交
        bankHandler(val){
            if(!this.rankNameValidator(this.realNamefrom.rankName)){
                return false
            }else if(!this.rankCardValidator(this.realNamefrom.rankCard)){
                return false
            }else if(!this.cardCellphoneValidator(this.realNamefrom.cardCellphone)){
                return false
            }

            if(val.picUrl == ''){
                this.$dialog.alert({
                    message:'请上传本人正面照'
                })
                return false
            }
            
            if(this.postMemberbankcardsHandler){
                
                let data = {
                    userId:this.uid,
                    bankName:val.rankName,
                    bankBranchName:'-',
                    cardNumber:val.rankCard,
                    cardCellphone:val.cardCellphone,
                    picUrl:val.picUrl,
                    type:'bankcard'
                }
                postMemberbankcards(data).then(res=>{
                    if(res.data.code == 200){
                        this.$dialog.alert({
                            message:res.data.msg
                        }).then(()=>{
                            this.init()
                        })
                    }else{
                        this.$dialog.alert({
                            message:res.data.msg
                        }).then(()=>{
                            this.init()
                        })
                    }
                })
            }else if(this.putMemberbankcardsHandler){
                let data = {
                    id:this.putMemberbankId,
                    userId:this.uid,
                    bankName:val.rankName,
                    bankBranchName:'-',
                    cardNumber:val.rankCard,
                    cardCellphone:val.cardCellphone,
                    picUrl:val.picUrl,
                    type:'bankcard'
                }
                putMemberbankcardsId(data).then(res=>{
                    if(res.data.code == 200){
                        this.$dialog.alert({
                            message:res.data.msg
                        }).then(()=>{
                            this.init()
                        })
                    }else{
                        this.$dialog.alert({
                            message:res.data.msg
                        }).then(()=>{
                            this.init()
                        })
                    }
                })
            }
            
        },
        
    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.real_box {margin:0 5.3vw; color:#222;}
.real_bottom { position:fixed; left:0; bottom:0; width:100%; background: #fff;}
.real_text_msg {font-size:3.46vw; margin-top:4vw; padding:2vw; color:#f00; border:1px solid #D3AD03; background:#FCE88F;}
.real_text {font-size:3.46vw; margin-top:4vw;}
.real_title {font-size:4vw;}

.real_ps p {font-size:4vw; color:#b0b0b0;}
.real_input {width:auto; border:1px solid #b0b0b0; border-radius: 2vw; height:14.66vw;}
.real_input input {width:90%; font-size:5.3vw; border:none; margin-left:2vw; height:13vw;}
.title_height {height:8vw; line-height:8vw;}
.margin_t {margin-top:4vw;}
.bottom_box {margin-bottom:30vw;}
.real_ps {width:auto; border:1px solid #b0b0b0; border-radius: 2vw; height:40vw; text-align: center; }
.real_photo_btn {width:89vw; height:40vw;}
.real_photo_btn img {width:11.73vw; height: 9.6vw; margin-top:8vw;}
.real_msg {margin-top:2.6vw; color:#f00;}
</style>
<style>
.van-uploader__preview-image {width: 89vw !important; height:40vw !important;}
</style>
